<template>
  <div class="rank">
    <div class="rank-top">
      <a href="#">
        <i></i>
        <p>热卖排行</p></a
      >
      <a href="#"
        ><i></i>
        <p>特价排行</p></a
      >
      <a href="#"
        ><i></i>
        <p>新品排行</p></a
      >
    </div>
    <div class="rank-bottom">
      <ul>
        <li><span>[官网价直降1100] Apple iPhone 8 Plus
            256GB 银色 移动联通电信4G手机</span><p>定金: ￥100.00</p></li>
        <li><span>[官网价直降1100] Apple iPhone 8 Plus
            256GB 银色 移动联通电信4G手机</span><p>定金: ￥100.00</p></li>
        <li><span>[官网价直降1100] Apple iPhone 8 Plus
            256GB 银色 移动联通电信4G手机</span><p>定金: ￥100.00</p></li>
        <li><span>[官网价直降1100] Apple iPhone 8 Plus
            256GB 银色 移动联通电信4G手机</span><p>定金: ￥100.00</p></li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "Rank",
};
</script>
<style scoped lang="less">
.rank {
  width: 1200px;
  height: 438px;
  margin: 0 auto;
  .rank-top {
    width: 312px;
    margin: 0 auto;
    height: 78px;
    a {
      display: inline-block;
      width: 100px;
      height: 78px;
      color: #666;
      i {
        display: inline-block;
        width: 35px;
        height: 35px;
        background: url();
        margin-left: 18px;
        margin-top:10px;
      }
      p {
        width: 70px;
        margin: 5px 4px;
      }
    }
    a:nth-child(1) {
      color: #e60012;
      i{
        background-position: -35px 0;
      }
    }
  }
  .rank-bottom{
      height: 340px;
      ul{
        width: 1200px;
          height: 340px;
          li{
              margin: 12px;
               border: 1px solid #e1251b;
              float: left;
              width: 272px;
              height: 328px;
              background-image:url("../../../assets/img/phone.jpg") ;
              background-size:230px 210px;
              background-repeat:no-repeat;
              background-position:center top;
              span{
                  display: block;
                margin-top:220px ;
                margin-left:10px;
                margin-right:10px;
                font-size:12px;
              }
              p{
                 margin-left:10px;
                   margin-top:10px;
                   color:rgb(225, 37, 27);
                   font-size: 20px;
              }
          }
      }
  }
}
</style>
